使用 styled 方式

 這個方式其實是 emotion 參考 styled-component,

 寫法是 `styled.` 任一 html element, 這樣就會形成一個帶 props 的 style component

npm i @emotion/styled

import styled from '@emotion/styled'

const Button = styled.button`
  color: turquoise;
`

render(<Button>This my button component.</Button>)

如果要判斷 button 是否有 active 來改變顏色傳,則可以傳 props 進到 <Button> ,只要在 <Button> 增加 active 的 props,內部再針對是否有 active 去做判斷就可以達成

import styled from '@emotion/styled'

const Button = styled.button`
  color: ${props=>props.active?:'red':'blue'};
`

render(<Button active>This my button component.</Button>)

也可以使用一個現有的 component 並附加 emotion 的 styled

import styled from '@emotion/styled'
const Basic = ({ className }) => (
  <div className={className}>Some text</div>
)

const Fancy = styled(Basic)`
  color: hotpink;
`

render(<Fancy />)

或是將 emotion 的 styled parent 傳進任意的 child 也很方便

import styled from '@emotion/styled'

const Child = styled.div`
  color: red;
`

const Parent = styled.div`
  ${Child} {
    color: green;
  }
`

render(
  <div>
    <Parent>
      <Child>Green because I am inside a Parent</Child>
    </Parent>
    <Child>Red because I am not inside a Parent</Child>
  </div>
)